// 快捷键合集：
// ❤ 1.rfc 快速生成一个函数式组件，并直接抛出

// 引入mockjs 
import Mock from "mockjs";

import React from 'react'
let arr = ["云儿", "薪薪", "155", "180"]

// 模拟数据 
let data = Mock.mock({
  "list|3": [{
    "id": "@id",
    "title": "@ctitle",
    "children": [{
      "id": "@id",
      "img": "@image(100x100,@color)",
      "txt": "@ctitle(20,30)",
    }]
  }]
})

export default function List() {
  return (
    <div>
      {//修改语法为js
        // 渲染内容只能通过map，因为map有返回值 
        // 1）单层数据渲染 
        arr.map((item, index) => {
          return <li key={index}>{item}</li>
        })
      }

      {/* 用mockjs模拟数据，进行双层渲染  */}
      <ul>
        {
          data.list.map( item => {
            return <li key={item.id}>
              <h3>{item.title}</h3>
              {
                item.children.map(v => {
                  return <div key={v.id}>
                    <img src={v.img} alt="" />
                    <p>{v.txt}</p>
                  </div>
                })
              }
            </li>
          })
        }
      </ul>
    </div>
  )
}


// ❤ 2.rfce 快速生成一个函数式组件，在最后单独抛出
// import React from 'react'

// function List() {
//   return (
//     <div>List</div>
//   )
// }

// // 可以在抛出之前，针对组件做其他操作
// export default List



// ❤ 3.rcc 快速生成一个class类组件，直接抛出
// import React, { Component } from 'react'
// // class定义一个类，List类名，extends继承于Component
// export default class List extends Component {
//     // 类里面定义了一个render函数，函数里面再去return   dom结构
//   render() {
//     return (
//       <div>List</div>
//     )
//   }
// }



// ❤ 4.rce 快速生成一个class类组件，在最后单独抛出【最常用】
// import React, { Component } from 'react'

// export class List extends Component {
//   render() {
//     return (
//       <div>List</div>
//     )
//   }
// }

// export default List




